<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div>
        <a-tabs v-model="activeTab" @change="tabChange">
          <a-tab-pane v-for="item in tabs" :key="item.value" :tab="item.text"></a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-card :bordered="false" style="margin-top: 16px">
      <a-row type="flex" justify="end" style="margin-bottom: 16px">
        <a-button type="primary" @click="addGodds">添加商品</a-button>
      </a-row>
      <!-- 商品列表 -->
      <GoodsTable ref="goodsTable" :queryParam="{}"></GoodsTable>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import GoodsTable from './components/GoodsTable.vue'

export default {
  name: '',
  components: {
    GoodsTable,
  },
  data() {
    return {
      activeTab: '0',
      tabs: [
        {
          value: '0',
          text: '商品管理',
          path: 'OrderMealGoods',
        },
        {
          value: '1',
          text: '分类',
          path: 'OrderMealClassify',
        },
        {
          value: '2',
          text: '餐桌管理',
          path: 'OrderMealDesk',
        },
        {
          value: '3',
          text: '设置',
          path: 'OrderMealSetting',
        },
        {
          value: '4',
          text: '店铺点餐二维码',
          path: 'OrderMealQrcode',
        },
        {
          value: '5',
          text: '轮播图',
          path: 'OrderMealSlide',
        },
        {
          value: '6',
          text: '加料区',
          path: 'OrderMealAccessories',
        },
      ],
      columns: [
        {
          title: '商品ID',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '产品名称',
          dataIndex: 'name',
          key: 'name',
          width: 200,
          scopedSlots: { customRender: 'goods_name' },
        },
        {
          title: '售价',
          dataIndex: 'price',
          key: 'price',
          defaultSortOrder: '',
          sorter: (a, b) => a.price - b.price,
          scopedSlots: { customRender: 'price' },
        },
        {
          title: '库存',
          dataIndex: 'goods_num',
          key: 'goods_num',
          defaultSortOrder: '',
          sorter: (a, b) => a.goods_num - b.goods_num,
          scopedSlots: { customRender: 'goods_num' },
        },
        {
          title: '上下架',
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' },
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource: [],
      selectedRowKeys: [],
      totalCount: 0,
      pageSize: 10,
      pageNo: 1,
      loading: false,
      currentRowId: '',
      showSetting: false,
      goodsInfo: {},
      plainOptions: [
        {
          value: 'shop',
          label: '到店自提',
        },
        {
          value: 'send',
          label: '同城配送',
        },
      ],
      form: this.$form.createForm(),
      currentGoodsItem: {},
      updateParams: {
        name: '',
        price: null,
        virtual_sales: null,
        goods_num: null,
      },
      showNamePopover: false,
      showPricePopover: false,
      showRestPopover: false,
      showVirtualPopover: false,
    }
  },
  watch: {},
  created() {},
  activated() {},
  computed: {},
  filters: {},
  mounted() {},
  methods: {
    // tab切换
    tabChange(e) {
      if (e == 0) return
      let item = this.tabs[e]
      this.$router.push({ name: item.path })
    },
    // 鼠标滑出表格
    onMouseLeaveTable(e) {
      if (e.relatedTarget && e.relatedTarget.className.indexOf('popover') != -1) {
        return
      }
      this.currentRowId = ''
    },
    // 表格选中
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    // 点击新建商品
    addGodds() {
      console.log('跳转到新建商品')
      this.$router.push({ name: 'OrderMealGoodsAdd' })
    },
  },
}
</script>
<style lang="less" scoped>
.goods-info {
  display: flex;
  align-items: flex-start;
  position: relative;
  .goods-pic {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    display: block;
  }
  .info-box {
    margin-left: 24px;
    margin-right: 5px;
    .goods-name {
      width: 185px;
      font-size: 14px;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.65);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .item-edit-box {
    width: 15px;
    height: 100%;
    position: absolute;
    right: -12px;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
